<template>
  <div class="user-form-container">
    <div class="form-wrapper">
      <!-- 登录/注册 Tabs -->
      <div class="tabs">
        <button :class="{ active: isLoginMode }" @click="isLoginMode = true">登录</button>
        <button :class="{ active: !isLoginMode }" @click="isLoginMode = false">注册</button>
      </div>

      <!-- 登录表单 -->
      <form v-if="isLoginMode" @submit.prevent="handleLogin">
        <div class="input-group">
          <!-- 假设用户名/邮箱输入 -->
          <i class="icon">👤</i>
          <input type="text" v-model="loginForm.username" placeholder="用户名/邮箱" required />
        </div>
        <div class="input-group">
          <i class="icon">🔒</i>
          <input type="password" v-model="loginForm.password" placeholder="密码" required />
        </div>

        <a href="#" class="forgot-password">忘记密码?</a>
        <button type="submit" class="btn-submit">登录</button>
      </form>

      <!-- 注册表单 -->
      <form v-else @submit.prevent="handleRegister">
        <div class="input-group">
          <i class="icon">👤</i>
          <input type="text" v-model="registerForm.username" placeholder="用户名" required />
        </div>
        <div class="input-group">
          <i class="icon">📧</i>
          <input type="email" v-model="registerForm.email" placeholder="邮箱" required />
        </div>
        <div class="input-group">
          <i class="icon">🔒</i>
          <input type="password" v-model="registerForm.password" placeholder="密码" required />
        </div>
        <button type="submit" class="btn-submit">注册</button>
      </form>

      <div class="separator">或</div>

      <!-- 社交登录图标 -->
      <div class="social-login">
        <!-- 实际项目中应使用图标库，这里用 emoji 占位 -->
        <i class="social-icon">💬</i>
        <i class="social-icon">🐧</i>
        <i class="social-icon">🔴</i>
      </div>

      <p class="copyright">© 2025 智能剪纸指导创作系统 版权所有</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login, register } from '@/api/userApi' // 引入 API

const router = useRouter()
const isLoginMode = ref(true) // true 为登录模式，false 为注册模式

const loginForm = ref({ username: '', password: '' })
const registerForm = ref({ username: '', email: '', password: '' })

const handleLogin = async () => {
  try {
    // 调用登录 API
    const response = await login(loginForm.value.username, loginForm.value.password)

    // 假设登录成功，后端返回 token 或用户信息
    console.log('登录成功', response.data)

    // 跳转到首页
    router.push('/')
  } catch (error) {
    console.error('登录失败:', error.response?.data?.message || '网络错误')
    alert('登录失败，请检查用户名和密码。')
  }
}

const handleRegister = async () => {
  try {
    // 简单校验 (实际项目需更严谨)
    if (!registerForm.value.username || !registerForm.value.email || !registerForm.value.password) {
      alert('请填写所有字段。')
      return
    }

    // 调用注册 API
    const response = await register(
      registerForm.value.username,
      registerForm.value.password,
      registerForm.value.email,
    )

    console.log('注册成功', response.data)
    alert('注册成功！请登录。')
    // 切换到登录模式
    isLoginMode.value = true
  } catch (error) {
    console.error('注册失败:', error.response?.data?.message || '网络错误')
    alert('注册失败，用户名或邮箱可能已存在。')
  }
}
</script>

<style scoped>
/* 样式复刻图示设计 */
.user-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90%;
}
.form-wrapper {
  width: 500px;
  padding: 20px;
  text-align: center;
}
.tabs button {
  background: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 2em;
  color: #999;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}
.tabs button.active {
  color: #e53935; /* 红色 */
  border-bottom-color: #e53935;
  font-weight: bold;
}
.input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
  /* ⭐️ 关键修改：将垂直 padding 增大，例如改为 15px */
  padding: 20px 10px; /* 上下 15px, 左右 10px */

  /* 原来是 padding: 10px; */

  background-color: #f5f5f5; /* 浅灰色背景 */
}
.input-group input {
  flex-grow: 1;
  border: none;
  background: none;
  outline: none;
  padding: 0 10px;
  font-size: 1.5em;
}
.input-group .icon {
  font-size: 2em;
  color: #999;
  font-style: normal;
}
.forgot-password {
  float: right;
  font-size: 1em;
  color: #999;
  margin-bottom: 10px;
  text-decoration: none;
}
.btn-submit {
  width: 100%;
  padding: 12px;
  background-color: #e53935; /* 红色 */
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1.5em;
  cursor: pointer;
  transition: background-color 0.3s;
}
.separator {
  margin: 20px 0;
  color: #999;
}
.social-login i {
  font-size: 2.5em;
  margin: 0 15px;
  cursor: pointer;
  font-style: normal;
}
.copyright {
  margin-top: 20px;
  font-size: 0.8em;
  color: #aaa;
}
</style>
